<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="__static__/assets/css/layui.css">
    <link rel="stylesheet" href="__static__/assets/css/view.css"/>
    <script src="__static__/Common/jquery.min.js"></script>
    <script src="__static__/assets/layui.js"></script>
    <script src="__static__/Common/vue.js"></script>
    <title></title>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-field-title {
            font-size: 18px;
        !important;
        }
    </style>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <form class="layui-form" action="" lay-filter="example">
                        <div class="layui-fluid">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                <legend>请假申请</legend>
                            </fieldset>
                            <div class="layui-row" style="padding-top: 20px;font-size: 16px">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">请假类别</label>

                                        <div class="layui-input-block">
                                            <select  lay-filter="aihao" name="class">
                                                <option value="">请假类别</option>
                                                <option value="0">上课</option>
                                                <option value="1">会议</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">请假时间段</label>

                                    <div class="layui-input-inline">
                                        <input type="text" name="leavefinishdate" class="layui-input" id="test16"
                                               placeholder="开始 到 结束" style="width: 450px">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text" style="margin-top: 20px;font-size: 16px">
                            <label class="layui-form-label">请假理由</label>

                            <div class="layui-input-block" style="padding-left: 16px">
                                <textarea placeholder="请输入请假原因" class="layui-textarea" name="reason"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input class="layui-btn" lay-submit="apply" lay-filter="apply" style="margin-left: 40px"
                                       value="提交申请"/>
                            </div>
                        </div>
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>请假审批状态</legend>
                        </fieldset>
                        <table id="demo"></table>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="__static__/assets/layui.all.js"></script>
<script src="__static__/Common/index/request.js"></script>
<script>
    var leavedate;
    var finishdate;
    var datas;
    getleaves();
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test16'
            , type: 'datetime'
            , range: '到',
            done: function (value, date, date1) {
                leavedate = date;
                finishdate = date1;
            }
        });
    });

    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(apply)', function (data) {
            console.log(data.field);
//            var datearray = {"leavedate":leavedate,"finishdate":finishdate};
//            var  newdatearray = $.extend(datearray,data.field);
//            console.log(newdatearray);
            $.ajax({
                type: "POST",
                url: "api/leaves",
                dataType: "json",
                data: JSON.stringify(data.field),
                async: false,
                contentType: "application/json",
                headers: __AUTH__,
                success: function (resp) {
                    datas = resp.data;
                    var layer = layui.layer;
                    layer.msg(resp.msg);
                    getleaves();
                },
                error:function(error){
                    console.log(error)
                }
            });
            return false;
        })
    });
    var element = layui.element;

    var form = layui.form;
    function getleaves(){
        $.ajax({
            type: "get",
            url: "api/getleaves",
            dataType: "json",
            async: false,
            contentType: "application/json",
            headers: __AUTH__,
            success: function (resp) {
                console.log(resp.data);
                var table = layui.table;
                table.render({
                    elem: '#demo'
                    , cols: [[ //标题栏
                        {field: 'id', title: '请假编号', width: 100, sort: true}
                        , {field: 'name', title: '姓名', width: 90}
                        , {field: 'class', title: '请假类别', width: 100}
                        , {field: 'reason', title: '请假原因', minwidth: 180}
                        , {field: 'leavedate', title: '请假时间', width: 280}
                        , {field: 'create_date', title: '申请时间', width: 220}
                        , {field: 'data_state', title: '审核状态', width: 90}
                        , {field: 'check_date', title: '审核时间', width: 90}
                        , {field: 'check_name', title: '审核人', width: 90}
                    ]]
                    ,data:resp.data
                    , skin: 'row' //表格风格
                    , even: true
                    , page: true //是否显示分页
                    , limits: [5, 7, 10]
                    , limit: 10 //每页默认显示的数量
                });
            },
            error:function(error){
                console.log(error)
            }
        });
        //展示已知数据

    }
</script>
<script>


</script>
</body>
</html>